<template>
  <view class="min-h-screen bg-[#f8f9fb] flex flex-col">
    <view class="bg-white m-4 p-4 rounded-2xl shadow">
      <text class="block text-base font-semibold mb-2">{{ house }}</text>
      <text class="block text-sm text-gray-500 mb-1">
        费用详情：{{ detail?.description || '' }}
      </text>
      <text class="block text-lg font-bold text-red-500">
        应缴金额：¥{{ detail?.amount || 0 }}
      </text>
    </view>

    <view class="bg-white m-4 p-4 rounded-2xl shadow flex-1">
      <text class="block text-base font-semibold mb-4">费用明细</text>
      <view
        class="flex justify-between items-center py-2 border-b border-gray-100"
      >
        <text class="text-gray-700">{{ detail?.name || '' }}</text>
        <text class="font-medium">¥{{ detail?.amount || 0 }}</text>
      </view>
      <view class="flex justify-between items-center py-3 mt-2">
        <text class="text-base font-semibold">合计</text>
        <text class="text-lg font-bold text-red-500"
          >¥{{ detail?.amount || 0 }}</text
        >
      </view>
    </view>

    <view class="p-4 bg-white shadow-inner">
      <button
        class="w-full py-3 rounded-2xl text-white text-lg font-bold bg-gradient-to-r from-[#409eff] to-[#66b1ff]"
        @click="show = true"
      >
        确认缴费
      </button>
    </view>

    <wd-popup
      v-model="show"
      position="bottom"
      custom-style="border-radius:32rpx 32rpx 0 0; padding:40rpx;"
      @close="show = false"
    >
      <view class="flex flex-col items-center mb-6">
        <text class="text-gray-500 text-sm">支付金额</text>
        <text class="text-2xl font-bold text-red-500 mt-2"
          >¥{{ detail?.amount || 0 }}</text
        >
      </view>

      <view class="mb-6">
        <view
          v-for="(item, index) in payList"
          :key="index"
          class="flex justify-between items-center py-3 border-b border-gray-100"
          @click="payMethod = item.value"
        >
          <view class="flex items-center space-x-2">
            <image :src="item.icon" class="w-6 h-6" />
            <text>{{ item.label }}</text>
          </view>
          <view>
            <text v-if="payMethod === item.value" class="text-[#409eff]"
              >✔</text
            >
          </view>
        </view>
      </view>

      <button
        class="w-full py-3 rounded-2xl text-white text-lg font-bold bg-gradient-to-r from-[#ff9f43] to-[#ff7849]"
        @click="handlePay"
      >
        立即支付
      </button>
    </wd-popup>

    <wd-popup
      v-model="loading"
      custom-style="border-radius:32rpx; padding:60rpx; display:flex; flex-direction:column; align-items:center;"
    >
      <wd-loading size="40px" color="#409eff"></wd-loading>
      <text class="mt-4 text-gray-600">正在支付...</text>
    </wd-popup>

    <wd-popup
      v-model="success"
      custom-style="border-radius:32rpx; padding:60rpx; display:flex; flex-direction:column; align-items:center;"
    >
      <image src="/static/success.png" class="w-12 h-12 mb-4" />
      <text class="text-lg font-bold text-green-500">支付成功</text>
    </wd-popup>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getPaymentDetail, updatePayment } from '@/api/payment'
import { backTo } from '@/utils/unifunc'

const detail = ref<IPayment>()
const house = uni.getStorageSync('house_name').name
const show = ref(false) // 支付弹窗
const loading = ref(false) // 支付中
const success = ref(false) // 支付成功弹窗
const ansType = ref(false) // 支付结果
const payMethod = ref('wechat')
const id = ref('')

const payList = [
  { label: '微信支付', value: 'wechat', icon: '/static/wechat.png' },
  { label: '支付宝支付', value: 'alipay', icon: '/static/alipay.png' }
]

async function handlePay() {
  if (detail.value?.is_paid) {
    uni.showToast({
      title: '请不要重复缴费',
      duration: 2000
    })
    return
  }
  show.value = false
  loading.value = true
  const res = await updatePayment<any, IPayment>({
    id: id.value,
    is_paid: 1
  })
  if (res.code === 200) {
    detail.value = res.data || {}
    loading.value = false
    success.value = true
    ansType.value = true
    backTo()
  }
}

onLoad(async (options: any) => {
  id.value = options.id
  const res = await getPaymentDetail<any, IPayment>({
    id: id.value
  })
  if (res.code === 200) {
    detail.value = res.data || {}
  }
})
</script>

<style scoped>
image {
  border-radius: 8rpx;
}
</style>
